<template>
    <div>
        <div class="viewStyle">
            <div style="background-color: #00B0F0;padding-top: 5px;margin-bottom: 30px;border-radius: 4px;" @click="startAnwer">
                <van-icon name="todo-list-o" size="60" />
                <div style="padding: 5px 0;">闯关答题</div>
            </div>
            <div style="background-color: #00B0F0;padding-top: 5px;margin-bottom: 30px;border-radius: 4px;" @click="startPractise">
                <van-icon name="records-o" size="60" />
                <div style="padding: 5px 0;">模拟练习</div>
            </div>
            <div style="background-color: #9C9CDF;padding-top: 5px;margin-bottom: 30px;border-radius: 4px;" @click="goMemo">
                <van-icon name="question-o" size="60" />
                <div style="padding: 5px 0;">规则说明</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { showNotify } from 'vant'
import { getQuestion } from '@/api/task.js';
const router = useRouter();
const taskId = localStorage.getItem('taskId')

function startAnwer() {
  const data = {
    taskId
  };
  data.latitude = localStorage.getItem('latitude');
  data.longitude = localStorage.getItem('longitude');
  data.memberId = localStorage.getItem('token');
  data.preview = true;
  getQuestion(data).then(res=>{
    console.log(res, 'res');
    if (res.code == 200) {
      router.replace(`/answer/${taskId}`)
    } else {
      showNotify({ message: res.msg, type: 'danger' })
    }
  })
}

function startPractise(){
    const data = {
    taskId
  };
  data.latitude = localStorage.getItem('latitude');
  data.longitude = localStorage.getItem('longitude');
  data.memberId = localStorage.getItem('token');
  data.preview = true;
  getQuestion(data).then(res=>{
    console.log(res, 'res');
    if (res.code == 200) {
      router.replace(`/answer/${taskId}/preactise`)
    } else {
      showNotify({ message: res.msg, type: 'danger' })
    }
  })
}

function goMemo(){
    router.push(`/reply/memo`)
}

</script>
<style lang="less" scoped>
.viewStyle {
    width: 85%;
    height: 100%;
    margin: 50px 7.5%;
    background-color: white;
    text-align: center;
    color: white;
    font-size: 16px;
    line-height: var(--van-card-desc-line-height);
}
</style>